<template>
  <div>
      <div >
          <div class="box">
                    <div class="circular circular1"></div>
                    <div class="circular circular2"></div>
                    <div class="circular circular3"></div>
                    <div class="circular circular4"></div>
              <div class="wrap">
                  <img src="../../assets/img/login.png" alt="" class="img1">
                  <div class="con">
                      <img src="../../assets/img/orange.png" alt="" >
                      <p>优质甄选·高枕无忧</p>
                      <el-input v-model="user.username" placeholder="请输入账号" clearable class="inp"></el-input>
                      <el-input placeholder="请输入密码" v-model="user.password" show-password clearable></el-input>
                        <el-button type="primary" @click="submit()">登&nbsp;&nbsp;录</el-button>
                      
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import {sucessAlert,warningAlert} from "../../utils/alert"
import {login} from "../../request/api.js"
export default {
  props: [],
  components: {},
  data() {
    return {
       user:{
           username:"",
           password:""
       }

    };
  },
  computed: {
    ...mapGetters({
      userInfo:"user"
    }),
  },
  methods: {
    ...mapActions({
      asyncUser:"asyncUser"
    }),
  submit(){
     login(this.user).then(res=>{
        if(res.data.code == 200){
          // 成功的提示窗
          sucessAlert(res.data.msg)
          // 将用户信息存储到状态层
          this.asyncUser(res.data.list)
          // 跳转到首页
          this.$router.push("/")
        }else{
          // 失败的提示窗
          warningAlert(res.data.msg)
        }
      })
    }
  },
  mounted() {

  },
};
</script>
<style scoped lang="less">
@import url("../../less/index.less");
.box {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(@color1, @color2);
    position: relative;
  }

  .wrap {
    position: absolute;
    right: 15%;
    top: 5vh;
  }

  .img1 {
    height: 90vh;
  }

  .con {
    width: 50%;
    position: absolute;
    right: 4%;
    top: 0;
  }

  .con img {
    width: 100%;
    margin-top: 25%;
  }

  .con p {
    margin-top: 7%;
    text-align: center;
    font-size: 26px;
    color: rgb(149, 149, 149);
    margin-bottom: 22%;
  }

  .con .inp {
    margin-bottom: 5%;
  }

  .con button {
    width: 100%;
    font-size: 20px;
    border-radius: 22px;
    margin-top: 3%;
  }

  .circular {
    border-radius: 50%;
    background: linear-gradient(rgba(255, 85, 51, 1), rgba(255, 85, 51, 0))
  }

  .circular1 {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 10%;
    top: 50%;
  }
  .circular2 {
    width: 150px;
    height: 150px;
    position: absolute;
    left: 0;
    top: 30%;
    transform: translateX(-50%);
  }
  .circular3 {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 30%;
    top: 20%;
  }
  .circular4 {
    width: 170px;
    height: 170px;
    position: absolute;
    right: 0;
    top: 25%;
    transform: translateX(30%);
  }
</style>